<template>
  <f7-page>
    <f7-navbar no-shadow sliding>
      <f7-nav-left>
        <f7-link back icon-f7="chevron_left"></f7-link>
      </f7-nav-left>
      <f7-nav-title class="nav-title"></f7-nav-title>
      <f7-nav-right class="nav-title-right">
        <f7-link icon-f7="ellipsis"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <div class="page-pg">
      <qm-operateTips
        title="操作成功"
        msg="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
        :src="require('/static/img/blankpage/success.svg')"
      ></qm-operateTips>
      <f7-button large fill round class="button">
        <div class="title">主要操作 Normal</div>
      </f7-button>
    </div>
  </f7-page>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
::v-deep.navbar {
  height: calc(88px * var(--ratio));
  .navbar-inner {
    justify-content: space-between;
    background-color: var(--color-fill-grey-inverse);
    .left {
      padding-left: calc(34px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
    .title {
      color: var(--color-ironblack);
      font-size: var(--font-size-maintitle);
    }
    .right {
      padding-right: calc(38px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
  }
}
.md .navbar a.link:before {
  content: none;
}
/deep/.page-content {
  padding-top: calc(88px * var(--ratio));
}
.page-pg {
  background: var(--color-fill-grey-inverse);
  /* padding-top: calc(72px * var(--ratio)); */
  // height: 100%;
  .button {
    // margin-left: calc(32px * var(--ratio));
    // margin-right: calc(32px * var(--ratio));
    line-height: normal;
    box-sizing: border-box;
    // width: calc(686px * var(--ratio));
    // height: calc(96px * var(--ratio));
    // margin: 0 auto;
    margin: 0 calc(32px * var(--ratio));
    padding-left: 0;
    padding-right: 0;
    --f7-button-fill-pressed-bg-color: var(--color-brand);
    --f7-button-outline-border-color: var(--color-brand);
    --f7-button-fill-bg-color: var(--color-brand);
    color: var(--color-text-base);
    .title {
      height: 100%;
      width: 100%;
      font-weight: 300;
      font-size: var(--font-size-maintitle);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>